<script>
export default {
  props: {
    userData: {
      type: Object,
      default: () => ({
        userId: "",
      }),
    },
  },
  data() {
    return {
      progress:{
        status:"",
        percentage:[],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemsId: null,
        userId: null,
      },
    }
  },
  methods: {
    progressFormat(percentage) {
      return `${percentage}`;
    },
    rateByScore(score){
      if (score >= 80){
        return  "success";
      }else if (score >= 60){
        return  "warning";
      }else {
        return  "exception";
      }
    },
  },
  watch:{
    userData:{
      handler(newVal) {
        if (newVal){
          this.progress.status = this.rateByScore(this.userData.total);
        }
      },
      immediate: true // 添加 immediate 配置项，立即触发一次 handler 函数
    }
  },
}
</script>

<template>
  <div class="page">
    <div class="title">
      <i class="el-icon-medal"/>
      <span>能力分数：</span>
    </div>
    <el-row>
      <el-progress
        :text-inside="true"
        :stroke-width="24"
        :percentage="userData.total"
        :format="progressFormat"
        :status="progress.status"
      />
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.page {
  padding: 18px 18px 0;
}
.title {
  padding-bottom: 6px;

}
</style>
